<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<title>欢迎使用免费空间！这是默认首页，请替换！</title>
<style>
*{margin:0;padding:0;}
html,body{position:relative;width:100%;height:100%;font-size:16px;font-family: "宋体",Arial;}
h1{
	text-align: center;
	position: absolute;top:50%;
	width:100%;transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
h1 span{
	animation-name:lala;
	animation-timing-function:linear;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	-webkit-animation-name:lala;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-o-animation-name:lala;
	-o-animation-timing-function:linear;
	-o-animation-duration:1s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:alternate;
	-ms-animation-name:lala;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:1s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:alternate;
	display:inline-block;
	width:40px;
	background: rgba(187, 187, 187, 0.3);
    border-radius: 50%;
    margin: 5px;
}
h1 span:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 1000px;
    border-left:1px dotted #C3C3C3;
    top: -1000px;
    left: 50%;
}

h1 span:nth-child(8):after,h1 span:nth-child(14):after {display:none;}
@keyframes lala{
	0%{top: -20px;}
	50%{top: 0px;}
	100%{top: 20px;}
}
@-webkit-keyframes lala{
	0%{top: -20px;}
	50%{top: 0px;}
	100%{top: 20px;}
}
@-o-keyframes lala{
	0%{top: -10px;}
	50%{top: 0px;}
	100%{top: 10px;}
}
@-ms-keyframes lala{
	0%{top: -10px;}
	50%{top: 0px;}
	100%{top: 10px;}
}
h1 span:nth-child(1){animation-delay:0s;-webkit-animation-delay:0s;-o-animation-delay:0s;-ms-animation-delay:0s;}
h1 span:nth-child(2){animation-delay:0.1s;-webkit-animation-delay:0.1s;-o-animation-delay:0.1s;-ms-animation-delay:0.1s;}
h1 span:nth-child(3){animation-delay:0.2s;-webkit-animation-delay:0.2s;-o-animation-delay:0.2s;-ms-animation-delay:0.2s;}
h1 span:nth-child(4){animation-delay:0.3s;-webkit-animation-delay:0.3s;-o-animation-delay:0.3s;-ms-animation-delay:0.3s;}
h1 span:nth-child(5){animation-delay:0.4s;-webkit-animation-delay:0.4s;-o-animation-delay:0.4s;-ms-animation-delay:0.4s;}
h1 span:nth-child(6){animation-delay:0.5s;-webkit-animation-delay:0.5s;-o-animation-delay:0.5s;-ms-animation-delay:0.5s;}
h1 span:nth-child(7){animation-delay:0.6s;-webkit-animation-delay:0.6s;-o-animation-delay:0.6s;-ms-animation-delay:0.6s;}
h1 span:nth-child(8){animation-delay:0.7s;-webkit-animation-delay:0.7s;-o-animation-delay:0.7s;-ms-animation-delay:0.7s;}
h1 span:nth-child(9){animation-delay:0.8s;-webkit-animation-delay:0.8s;-o-animation-delay:0.8s;-ms-animation-delay:0.8s;}
h1 span:nth-child(10){animation-delay:0.9s;-webkit-animation-delay:0.9s;-o-animation-delay:0.9s;-ms-animation-delay:0.9s;}
h1 span:nth-child(11){animation-delay:1s;-webkit-animation-delay:1s;-o-animation-delay:1s;-ms-animation-delay:1s;}
h1 span:nth-child(12){animation-delay:1.1s;-webkit-animation-delay:1.1s;-o-animation-delay:1.1s;-ms-animation-delay:1.1s;}
h1 span:nth-child(13){animation-delay:1.2s;-webkit-animation-delay:1.2s;-o-animation-delay:1.2s;-ms-animation-delay:1.2s;}
h1 span:nth-child(14){animation-delay:1.3s;-webkit-animation-delay:1.3s;-o-animation-delay:1.3s;-ms-animation-delay:1.3s;}
@media screen and (max-width: 640px) {
	h1 span{font-size: 1rem;width:auto;margin: 0px;}
}

</style>
</head>
<body>
<a href="http://www.mizuiren.com" target="_blank"><h1>一张漂亮的网页，从点滴开始。</h1></a>
<script>
window.onload=function(){
	var content="";
	var h1=document.getElementsByTagName("h1")[0];
	var text=h1.innerHTML;
	var len=text.length;
	for(var i=0;i<len;i++){
		content+="<span>"+text[i]+"</span>";
	}
	h1.innerHTML=content;
	(function(){
		var span=h1.getElementsByTagName("span"),spanLen=span.length;
		var arr=[];
		for(var j=0;j<spanLen;j++){
			var left=span[j].offsetLeft;
			arr.push(left);
		}
		for(var j=0;j<spanLen;j++){
			var left=span[j].offsetLeft;
			var random=	"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
			span[j].style.position="absolute";
			span[j].style.left=arr[j]+"px";
			span[j].style.color=random;
		}
	})()
	console.log("技术支持：秋叶网络博客 www.mizuiren.com")
}
</script>

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"220"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</body>
</html>
